<template>
  <div class="content">
    <div class="mid">
      <!-- 缩放参数调节组件 -->
      <Zoom></Zoom>
      <br />
      <!-- 撤销、下一步、菜单、 -->
      <Toolbar></Toolbar>
    </div>
    <hr />
    <el-table :data="passageway" border style="width: 100%" v-if="false">
      <el-table-column width="280" label="通道">
        <template #default="scope">
          <el-avatar style="background-color: #409eff">
            {{ scope.row.index }}
          </el-avatar>
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="col1" prop="col1"></el-table-column>
      <el-table-column width="200" label="col2" prop="col2"></el-table-column>
      <el-table-column width="650" label="col3" prop="col3"></el-table-column>
      <el-table-column type="selection" width="55" />
    </el-table>
    <div id="myChart" :style="{ width: '1500px', height: '300px' }"></div>
    <hr />
    <!-- 底部单选菜单 -->
    <Footerbar></Footerbar>
  </div>
</template>

<script setup lang="ts">
interface Passway {
  index: number;
  name: string;
  col1: string;
  col2: string;
  col3: string;
  checked: boolean;
}
import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
import Zoom from "../components/zoom.vue";
import Toolbar from "../components/toolbar.vue";
import Footerbar from "../components/footerbar.vue";
import * as echarts from "echarts";
import axios from 'axios'

let arr = [
  {
    index: 1,
    name: "通道1",
    col1: "s",
    col2: "d",
    col3: "c",
    checked: false,
  },
  {
    index: 2,
    name: "通道1",
    col1: "s",
    col2: "d",
    col3: "c",
    checked: false,
  },
  {
    index: 3,
    name: "通道2",
    col1: "s",
    col2: "d",
    col3: "c",
    checked: false,
  },
];
// 通道渲染数据
const passageway: list = ref([]);
passageway.value = arr;

// 全选框
const checkall: boolean = ref(false);

// Echart图表
const getData = (myChart, init = false) => {
	// axios.get('./data.json').then(res => {
	axios.get('./data').then(res => {
	// axios.get('http://127.0.0.1:5000/').then(res => {
		myChart.setOption(res.data);
	})
	
};

onMounted(() => {
  // DOM 现在更新了
  let myChart = echarts.init(document.getElementById("myChart"));
  setInterval(() => {
    getData(myChart);
    window.onresize = function () {
      //自适应大小
      myChart.resize();
    };
  }, 1000);
});
</script>

<style scope>
.slider-demo-block {
  display: flex;
  align-items: center;
}

.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}

.mid {
  height: 50%;
  margin-bottom: 2%;
}

/* .content {
  height: 570px;
} */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  /* background: #d3dce6; */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
